<docs>
  ## alert 发布职位提示
</docs>
<template>
  <transition name="confirm">
    <div class="confirm" v-show="visible" @click="hide">
      <div class="container-wrap">
        <img src="~common/images/index/null.png" alt="">
        <p>您还没有发布任何职位，点击<span @click="link">发布职位</span>去发布吧</p>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "jobAlert",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked: false
    };
  },
  methods: {
    hide() {
      this.$emit("update:visible", false);
    },
    // 点击发布
    link(item) {
      this.$router.push({path: "/vocation/editDetail"});
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/var.scss";
.confirm {
  position: fixed;
  width: 100%;
  top: 110px;
  left: 0;
  height: 100%;
  z-index: 10;
  background: $color-cover-bg;
  &.confirm-enter-active {
    animation: cover-fadein 0.3s;
    .container {
      animation: content-zoom 0.3s;
    }
  }
  &.confirm-leave-to {
    opacity: 0;
  }
  &.confirm-leave-active {
    transition: all ease 0.3s;
  }
}
//弹框内容
.container-wrap {
  height: 366px;
  background-color: #fff;
  text-align: center;
  color: #333;
  font-size: 30px;
  img{
    height: 106px;
    width: 126px;
    margin-top: 90px;
    margin-bottom: 50px;
  }
  span{
    text-decoration:underline;
    color: #F22106;
  }
}
</style>
